<template>
  <div>
    <template v-for="subItem in dataList">
      <template v-if="subItem.children">
        <submenu :index="subItem.index">
          <template slot="title"><i :class="subItem.icon" v-if="subItem.icon"></i>{{ subItem.title }}</template>
          <menu-sunmenus :dataList="subItem"></menu-sunmenus>
        </submenu>
      </template>
      <template v-else>
        <menu-items :index="subItem.index">
          <i :class="subItem.icon" v-if="subItem.icon"></i><span slot="title">{{ subItem.title }}</span>
        </menu-items>
      </template>
    </template>
  </div>

</template>

<script>
  import NavMenu from './menu'
  import MenuItems from './menu-item'
  import MenuItemGroup from './menu-item-group'
  import Submenu from './submenu'

  export default {
    name: 'MenuSubmenus',
    components: {
      NavMenu,
      MenuItems,
      MenuItemGroup,
      Submenu
    },
    computed: {},
    mounted () {
    },
    props: {
//      dataList: Array
    },
    data () {
      return {
        dataList: [
          {
            icon: 'fa fa-table',
            index: '1',
            title: '导航一'
          },
          {
            icon: 'fa fa-slack',
            index: '2',
            title: '导航二',
            children: [
              {
                icon: 'fa fa-slack',
                index: 'test',
                title: '测试'
              },
              {
                icon: 'fa fa-slack',
                index: 'dynamicForm',
                title: '表单'
              }
            ]
          },
          {
            icon: 'fa fa-tachometer',
            index: '3',
            title: '导航三',
            children: [
              {
                icon: 'fa fa-slack',
                index: 'counter',
                title: '选项1'
              },
              {
                icon: 'fa fa-slack',
                index: 'menu',
                title: '菜单'
              },
              {
                index: 'upload',
                title: '选项3',
                children: [
                  {
                    icon: 'fa fa-slack',
                    index: 'baseform',
                    title: '选项1'
                  },
                  {
                    icon: 'fa fa-slack',
                    index: 'vueeditor',
                    title: '选项2'
                  },
                  {
                    index: 'upload',
                    title: '选项3'
                  }
                ]
              }
            ]
          },
          {
            icon: 'fa fa-money',
            index: 'grid',
            title: '表格'
          },
          {
            icon: 'fa fa-language',
            index: '',
            title: '导航五'
          }
        ]
      }
    }
  }
</script>

<style lang="scss">

</style>
